<template>
  <div class="main">
    <div class="body">
      <div class="body-left">
        <AwardCard :awardId="awardId"></AwardCard>
      </div>
      <div class="body-center">
        <div class="update">
          <el-button type="error" @click="dialogVisible=true">删除奖项</el-button>
          <el-button type="primary" @click="dialogFormVisible = true" >更新奖项</el-button>
        </div>
      </div>
    </div>
    <div class="foot">
    </div>
  </div>
  <el-dialog
      v-model="dialogFormVisible"
      title="更新奖项内容"
      width="70%"
  >
    <div class="Table">
      <div class="form">
        <div class="form-body">
          <el-form :model="award" :inline="true">
            <el-form-item label="奖项名称" >
              <el-input
                  v-model="award.title"
                  type="text"
                  autocomplete="off"
                  placeholder="请输入奖项名称"
              />
            </el-form-item>
            <el-form-item label="奖项数量" label-width="120px">
              <el-input-number v-model="award.number" :min="1" :max="10"/>
            </el-form-item>
            <el-form-item label="奖项金额" label-width="120px">
              <el-input
                  v-model="award.money"
                  type="text"
                  autocomplete="off"
                  placeholder="请输入奖项金额"
              ></el-input>
            </el-form-item>
            <el-form-item label="绩点(前%)" label-width="120px">
              <el-input-number v-model="award.standard" :step="2" />
            </el-form-item>
            <el-form-item label="截止日期" label-width="120px">
              <el-date-picker
                  v-model="award.deadline"
                  type="datetime"
                  placeholder="请选择截止日期"
              />
            </el-form-item>
            <el-form-item label="其他要求">
              <el-input
                  v-model="award.details"
                  type="text"
                  autocomplete="off"
                  placeholder="请补充其他要求"
              />
            </el-form-item>
            <el-form-item label="奖项描述" label-width="200px">
              <el-input
                  v-model="award.explain"
                  type="textarea"
                  autocomplete="off"
                  placeholder="请输入详细要求"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="toUpdate">
          更新奖项
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog
      v-model="dialogVisible"
      title="删除奖项"
      width="50%"
  >
    <span>删除奖项需谨慎，删除奖项后对应的奖项申请情况也将被删除！！！！！</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="warning" @click="toDelete">
          删除
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import AwardCard from "../common/AwardCard.vue";
import {deleteAwardByAwardId, selectOneAwardById, updateAward} from "../../api/award";
export default {
  name: "UpdateAward",
  components: {AwardCard},
  data () {
    return {
      dialogFormVisible: false,
      dialogVisible:false,
      awardId: this.$route.query.id,
      award:{
        title:'',
        number:'',
        deadline:'',
        details:'',
        money:'',
        standard:'',
        explain:''
      },//奖项表单
    }
  },
  methods: {
    loadAward(){
      selectOneAwardById(this.awardId).then( response => {
          this.award = response.data;
          }
      )
    },
    toDelete(){
      this.dialogVisible = false;
      deleteAwardByAwardId(this.awardId).then(res => {
        window.history.go(0);
        this.$notify({
          title: '删除成功',
          message: "删除奖项信息成功" + res.message,
          type: 'success'
        });
      })
    },
    toUpdate(){
      this.award.money = this.award.money+"";
      this.award.number = this.award.number+"";
      this.award.standard = this.award.standard+"";
      this.dialogFormVisible = false;
      updateAward(this.award).then(response => {
        window.history.go(0);
        this.$notify({
          title: '成功',
          message: "奖项信息更新成功:" + response.message,
          type: 'success'
        });
      })
    }
  },
  created() {
      this.loadAward(this.awardId)
  },
  mounted() {
    this.awardId = this.$route.query.id
  }
}
</script>
<style scoped>
.main {
  padding-top: 30px;
  margin-left: 50px;
  display: flex;
  flex-direction: column;
}
.body {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
.body-left {
  margin-right: 150px;
}
.body-center {
  margin-top: 20px;
  width: 150px;
  margin-right: 10px;
}
.update {
  display: flex;
  margin-top: 50px;
}
.updateForm {
  display: flex;
}

.Table {
  display: flex;
  justify-content: center;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.15); /* 灰色 */
}
.form {
  display: flex;
  flex-direction: column;
}
.form-body{
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

</style>